<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>当前的n值是：{{n}}</h2>
			<button id="btn" @click="add">点我n+1</button>
			<button @click="goDie">不活了</button>
		</div>

		<script type="text/javascript">
			let vm = new Vue({
				el:'#demo',
				/* template:`
					<div>
						<h2>当前的n值是：{{n}}</h2>
						<button id="btn" @click="add">点我n+1</button>
					</div>
				`, */
				data:{
					n:1
				},
				methods:{
					add(){
						console.log('add执行了')
						this.n+=1
					},
					goDie(){
						console.log('goDie执行了')
						this.$destroy()
					}
				},
				watch:{
					n(value){
						console.log('n变化了',value)
					}
				},
				// 创建之前（数据代理、数据劫持创建之前）
				beforeCreate(){
					console.log('--beforeCreate--')
					// debugger;
				},
				// 创建完毕（数据代理、数据劫持创建完毕）
				created(){
					console.log('--created--')
					// debugger;
				},
				// 挂载之前（还没有形成最终的真实DOM到页面呢）
				beforeMount(){
					console.log('--beforeMount--')
					// debugger;
					// document.getElementById('btn').innerText = '哈哈'
					// debugger;
				},
				// 挂载完毕
				mounted(){
					console.log('--mounted--')
					// debugger;
					// document.getElementById('btn').innerText = '哈哈'
				},
				// 更新之前
				beforeUpdate(){
					console.log('--beforeUpdate--')
					// debugger;
				},
				// 更新完毕
				updated(){
					console.log('--updated--')
					// debugger;
				},
				// 销毁之前
				beforeDestroy(){
					console.log('--beforeDestroy--')
					this.n = 999
				},
				// 销毁完毕
				destroyed(){
					console.log('--destroyed--')
				}
			})
		</script>
	</body>
</html>